<script setup>
import { computed, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
const $route = useRoute()
const electron = require('electron')
const { ipcRenderer } = electron

const toggleTheme = () => {
  const theme = window.storeApi.ipcRenderer.getStoreValue('theme')

  document.documentElement.setAttribute('data-theme', theme == 'light' ? 'dark' : 'light')
  window.storeApi.ipcRenderer.setStoreValue('theme', theme == 'light' ? 'dark' : 'light')
}

// 隐藏窗口事件
const closeWindow = () => {
  const url = $route.path
  // 根据hash去判断
  if (url === '/noteList') {
    // 隐藏主窗口
    ipcRenderer.send('mainWindow:hide')
  } else {
    // 关闭便签窗口
    // 使用正则表达式匹配 "/note/" 后跟一个或多个数字
    const match = /^\/note\/(\d+)$/.exec(url)
    if (match) {
      // 提取匹配的数字部分
      const noteId = match[1]

      // 关闭便签窗口，传递 noteId
      ipcRenderer.send('noteWindow:close', noteId)
    }
  }
}

const isAlignTopFlag = ref(false)

// 置顶功能
const isAlignTop = () => {
  isAlignTopFlag.value = !isAlignTopFlag.value
  const url = $route.path
  // 根据hash去判断
  if (url === '/noteList') {
    // 隐藏主窗口
    ipcRenderer.send('window:alignTop', '-1', isAlignTopFlag.value)
  } else {
    // 关闭便签窗口
    // 使用正则表达式匹配 "/note/" 后跟一个或多个数字
    const match = /^\/note\/(\d+)$/.exec(url)
    if (match) {
      // 提取匹配的数字部分
      const noteId = match[1]
      // 关闭便签窗口，传递 noteId
      ipcRenderer.send('window:alignTop', noteId, isAlignTopFlag.value)
    }
  }
}

// 笔记窗口id
const noteWindowId = ref(0)

// 新建笔记
const createNoteWindow = () => {
  // 先从本地存储去获取有多少个笔记
  const noteWindowsParamsArr = window.storeApi.ipcRenderer.getStoreValue('noteWindowsParamsArr')

  // 存储笔记的id
  // noteWindowId.value = noteWindowsParamsArr.length === 0 ? 0 : noteWindowsParamsArr.length

  /**
   * 判断之前是否存在笔记
   * 存在笔记就拿最后一个笔记的id+1
   * 不存在就直接为0
   */
  noteWindowId.value =
    noteWindowsParamsArr.length === 0
      ? 0
      : noteWindowsParamsArr[noteWindowsParamsArr.length - 1].id + 1
  // 创建笔记窗口
  ipcRenderer.send('noteWindow:create', noteWindowId.value)
}

// 设置按钮还是省略号按钮
const isSetting = ref(true)

const handleDrawer = () => {
  const noteId = $route.path.split('/')[2]
  // 向主进程发送消息
  ipcRenderer.send('drawerActive:change:js', noteId)
}

watch(
  () => $route.path,
  (newVal) => {
    isSetting.value = newVal === '/noteList' ? true : false
  },
  {
    deep: true,
    immediate: true
  }
)

const backgroundColor = computed(() => {
  return $route.path === '/noteList' ? 'var(--background-color)' : 'var(--note-header-background)'
})

const iconColor = computed(() => {
  return $route.path === '/noteList' ? '#989898' : '#222222'
})
</script>
<template>
  <div class="CustomHeader" :style="{ backgroundColor: backgroundColor }">
    <!-- 左边加号区域 -->
    <button class="add-button" @click="createNoteWindow">
      <n-icon size="20" :color="iconColor">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 512 512"
        >
          <path
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="32"
            d="M256 112v288"
          ></path>
          <path
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="32"
            d="M400 256H112"
          ></path>
        </svg>
      </n-icon>
    </button>
    <!-- 中间空白区域 -->
    <div class="middle-space"></div>
    <!-- 右边设置和关闭窗口区域 -->
    <div class="right-controls">
      <button v-if="isSetting" class="settings-button" @click="toggleTheme">
        <n-icon size="20" :color="iconColor">
          <svg
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="24px"
            y="10px"
            viewBox="0 0 512 512"
            enable-background="new 0 0 512 512"
            xml:space="preserve"
          >
            <g>
              <path
                d="M413.967,276.8c1.06-6.235,1.06-13.518,1.06-20.8s-1.06-13.518-1.06-20.8l44.667-34.318
              c4.26-3.118,5.319-8.317,2.13-13.518L418.215,115.6c-2.129-4.164-8.507-6.235-12.767-4.164l-53.186,20.801
              c-10.638-8.318-23.394-15.601-36.16-20.801l-7.448-55.117c-1.06-4.154-5.319-8.318-10.638-8.318h-85.098
              c-5.318,0-9.577,4.164-10.637,8.318l-8.508,55.117c-12.767,5.2-24.464,12.482-36.171,20.801l-53.186-20.801
              c-5.319-2.071-10.638,0-12.767,4.164l-42.549,71.765c-2.119,4.153-1.061,10.399,2.129,13.518L96.97,235.2
              c0,7.282-1.06,13.518-1.06,20.8s1.06,13.518,1.06,20.8l-44.668,34.318c-4.26,3.118-5.318,8.317-2.13,13.518L92.721,396.4
              c2.13,4.164,8.508,6.235,12.767,4.164l53.187-20.801c10.637,8.318,23.394,15.601,36.16,20.801l8.508,55.117
              c1.069,5.2,5.318,8.318,10.637,8.318h85.098c5.319,0,9.578-4.164,10.638-8.318l8.518-55.117c12.757-5.2,24.464-12.482,36.16-20.801
              l53.187,20.801c5.318,2.071,10.637,0,12.767-4.164l42.549-71.765c2.129-4.153,1.06-10.399-2.13-13.518L413.967,276.8z
              M255.468,328.8c-41.489,0-74.46-32.235-74.46-72.8s32.971-72.8,74.46-72.8s74.461,32.235,74.461,72.8S296.957,328.8,255.468,328.8
              z"
              ></path>
            </g>
          </svg>
        </n-icon>
      </button>
      <button v-else class="ellipsis-button" @click="handleDrawer">
        <n-icon size="24" :color="iconColor">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 512 512"
          >
            <circle cx="256" cy="256" r="48" fill="currentColor"></circle>
            <circle cx="416" cy="256" r="48" fill="currentColor"></circle>
            <circle cx="96" cy="256" r="48" fill="currentColor"></circle>
          </svg>
        </n-icon>
      </button>
      <button
        class="verticalAlignTop-button"
        :class="{ ishover: isAlignTopFlag }"
        disabled
        @click="isAlignTop"
      >
        <n-icon size="24" :color="iconColor">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 24 24"
          >
            <path d="M8 11h3v10h2V11h3l-4-4l-4 4zM4 3v2h16V3H4z" fill="currentColor"></path>
          </svg>
        </n-icon>
      </button>
      <button class="close-button" @click="closeWindow">
        <n-icon size="24" :color="iconColor">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 512 512"
          >
            <path
              d="M289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34z"
              fill="currentColor"
            ></path>
          </svg>
        </n-icon>
      </button>
    </div>
  </div>
</template>

<style scoped lang="less">
.CustomHeader {
  position: relative;
  z-index: 10;
  -webkit-app-region: drag;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  transition: all 0.5s;
  .right-controls {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
  }
  button {
    -webkit-app-region: no-drag;
    height: 100%;
    border: none;
    background-color: transparent;
    padding: 10px;
    &:hover {
      background-color: var(--header-icon-hover-background);
    }
    &.ishover {
      background-color: var(--header-icon-hover-background);
    }
  }
}
</style>
